<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app-7">
			<ol>
				<!--
				现在我们为每个 todo-item 提供 todo 对象
				todo 对象是变量，即其内容可以是动态的。
				我们也需要为每个组件提供一个“key”，稍后再
				作详细解释。
				-->
				<todo-item
				v-for="item in groceryList"
				v-bind:todo="item"
				v-bind:key="item.id">
				</todo-item>
			</ol>
			
			<ul>
				<todo-item 
				v-for="obj in itemList" 
				v-bind:todo="obj" 
				v-bind:todo2="obj.text"
				v-bind:key="obj.id">
				</todo-item>
			</ul>
		</div>
		
		<script type="text/javascript">
			// 创建一个新的vue组件.名称为todo-item
			Vue.component('todo-item', {
			   // 组件中的todo属性被引用到这里
			  props: ['todo'],
			  // 使用todo属性的值来编写模板代码
			  template: '<li>{{ todo.text }}</li>'
			})

			var app7 = new Vue({
			  el: '#app-7',
			  data: {
				groceryList: [
				  { id: 0, text: '蔬菜' },
				  { id: 1, text: '奶酪' },
				  { id: 2, text: '随便其它什么人吃的东西' }
				],
				itemList: [
					{id: 3, text: "天亮"},
					{id: 4, text: "天黑"},
					{id: 5, text: "睡了"}
				]
			  }
			})
			
		</script>
	</body>
</html>